<template>
    <div class="home-homeIndex-msgRecordComp">

        <Tabs class="tab-text">

            <Tab-pane label="系统消息">
                <ul class="list-unstyle">
                    <li v-for="item in messageList">
                        <div class="float_right width_150px">{{item.RDate}}</div>
                        <div class="margin_right_150" style="font-weight: 600;">{{item.SMTitle}}</div>
                        <div>{{item.SMContent}}</div>
                    </li>
                </ul>
                <div v-if="messagePageCount > 0" class="page_center">
                    <Page :total="messagePageCount" :page-size="pageInfo.message.pageSize" show-elevator
                          @on-change="pageInfo.message.pageIndex = $event; getMessage();"></Page>
                </div>
            </Tab-pane>

            <Tab-pane label="消费记录">
                <ul class="list-unstyle capital-flow">
                    <li style="font-weight: 600;">
                        <div>用户名称</div>
                        <div>消费金额</div>
                        <div>消费时间</div>
                        <div>备注</div>
                    </li>
                    <li v-for="item in capitalFlow">
                        <div>{{item.ANickName}}</div>
                        <div>{{item.CFRMoney}}</div>
                        <div>{{item.RDate}}</div>
                        <div>{{item.CFRDes}}</div>
                    </li>
                </ul>
                <div v-if="capitalPageCount > 0" class="page_center">
                    <Page :total="capitalPageCount" :page-size="pageInfo.capital.pageSize" show-elevator
                          @on-change="pageInfo.capital.pageIndex = $event; getCapitalFlow();"></Page>
                </div>
            </Tab-pane>

            <Tab-pane label="定制记录">
                <ul class="list-unstyle">
                    <li style="font-weight: 600;">
                        <div class="float_right width_150px">定制时间</div>
                        <div class="margin_right_150">标题</div>
                    </li>
                    <li v-for="item in customizeRecords">
                        <div class="float_right width_150px">{{item.RDate}}</div>
                        <div class="margin_right_150">{{item.CRTitle}}</div>
                    </li>
                </ul>
                <div v-if="customizePageCount > 0" class="page_center">
                    <Page :total="customizePageCount" :page-size="pageInfo.customize.pageSize" show-elevator
                          @on-change="pageInfo.customize.pageIndex = $event; getCustomizeRecords();"></Page>
                </div>
            </Tab-pane>

        </Tabs>

    </div>
</template>

<script type="text/ecmascript-6">
    // 发送ajax 请求的组件
    import getData from '../../../api/getData'

    export default {
        data: function () {
            return {
                pageInfo: {
                    message: {
                        pageIndex: 1,
                        pageSize: 5
                    },
                    capital: {
                        pageIndex: 1,
                        pageSize: 8
                    },
                    customize: {
                        pageIndex: 1,
                        pageSize: 8
                    }
                },
                messagePageCount: 0,
                messageList: [],
                capitalPageCount: 0,
                capitalFlow: [],
                customizePageCount: 0,
                customizeRecords: []
            }
        },
        created(){
            this.getMessage();
            this.getCapitalFlow();
            this.getCustomizeRecords();
        },
        methods: {
            //获取系统消息
            getMessage ( ){
                var self = this;
                getData.post("getMessage", self.pageInfo.message).then(function (response) {
                    if(response.data.code == 0){
                        var tempData = response.data.data;
                        self.messageList = tempData;
                        self.messagePageCount = response.data.PageCount;
                    }else{
                        self.$Message.info( response.data.msg ? response.data.msg : '网络错误，请稍后重试' );
                    }

                }).catch(function (response) {
                    self.$Message.info('网络错误，请联系客服');
                });
            },
            //获取消费记录
            getCapitalFlow ( ){
                var self = this;
                getData.post("getCapitalFlow", self.pageInfo.capital).then(function (response) {
                    if(response.data.code == 0){
                        var tempData = response.data.data;
                        self.capitalFlow = tempData;
                        self.capitalPageCount = response.data.PageCount;
                    }else{
                        self.$Message.info( response.data.msg ? response.data.msg : '网络错误，请稍后重试' );
                    }

                }).catch(function (response) {
                    self.$Message.info('网络错误，请联系客服');
                });
            },
            //获取定制记录
            getCustomizeRecords ( ){
                var self = this;
                getData.post("getCustomizeRecords", self.pageInfo.customize).then(function (response) {
                    if(response.data.code == 0){
                        var tempData = response.data.data;
                        self.customizeRecords = tempData;
                        self.customizePageCount = response.data.PageCount;
                    }else{
                        self.$Message.info( response.data.msg ? response.data.msg : '网络错误，请稍后重试' );
                    }

                }).catch(function (response) {
                    self.$Message.info('网络错误，请联系客服');
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    .home-homeIndex-msgRecordComp {

        .ivu-tabs-nav {
            display: block;
            position: relative;
            float: left;
            color: #222;
            font-size: 14px;
            cursor: pointer;
            height: 44px;
            line-height: 22px;
            bottom: -1px;
            border-bottom: 3px solid transparent;
        }

        .list-unstyle{
            margin-bottom: 20px;
            line-height: 24px;
        }

        .list-unstyle li{
            min-height: 25px;
            margin-bottom: 5px;
        }

        .capital-flow > li >div{
            display: inline-block;
            width: 25%;
            height: 100%;
            float: left;
        }

    }
</style>
